<template>
  <div>
    <!-- 图表渲染的容器 -->
    <!-- <span id="main1"></span> -->
    <span id="main2"></span>
    <p>
      打包工具：webpack、gulp、grunt。具体内容：压缩代码（减少代码体积）、合并文件（减少文件数量）、混淆代码（删除注释、空行、回车；降低可读性）、修改文件名（带上时间戳或者随机字符，确保没有缓存）。服务器上只部署dist文件夹中的内容。
    </p>
    <p>SSR:sever side render</p>
    <p>SEO:Search Engine Optimization</p>
    <div class="div01">
      <p class="p01">我是一段文字</p>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
import { BarChart, RadarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import { GridComponent } from "echarts/components";
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  BarChart,
  RadarChart,
  GridComponent,
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
export default {
  data() {
    return {
      radarOption: {
        title: {
          text: "基础雷达图",
        },
        tooltip: {},
        legend: {
          data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"],
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            { name: "销售（sales）", max: 6500 },
            { name: "管理（Administration）", max: 16000 },
            { name: "信息技术（Information Techology）", max: 30000 },
            { name: "客服（Customer Support）", max: 38000 },
            { name: "研发（Development）", max: 52000 },
            { name: "市场（Marketing）", max: 25000 },
          ],
        },
        series: [],
      },
    };
  },
  created() {
    // 模拟发请求！！！
    this.radarOption.series = [
      {
        name: "预算 vs 开销（Budget vs spending）",
        type: "radar",
        // areaStyle: {normal: {}},
        data: [
          {
            value: [4300, 10000, 28000, 35000, 50000, 19000],
            name: "预算分配（Allocated Budget）",
          },
          {
            value: [5000, 14000, 28000, 31000, 42000, 21000],
            name: "实际开销（Actual Spending）",
          },
        ],
      },
    ];
  },
  mounted() {
    // // 注意钩子函数的选择！！！
    // var myChart = echarts.init(document.getElementById("main1"));
    // // 指定图表的配置项和数据
    // var option = {
    //   title: {
    //     text: "ECharts 入门示例",
    //   },
    //   tooltip: {},
    //   legend: {
    //     data: ["销量"],
    //   },
    //   xAxis: {
    //     data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: "销量",
    //       type: "bar",
    //       data: [5, 20, 36, 10, 10, 20],
    //     },
    //   ],
    // };

    // // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    // 以下是第二个图表
    var yourChart = echarts.init(document.getElementById("main2"));
    yourChart.setOption(this.radarOption);
  },
};
</script>
<style lang="stylus">
#main1 {
  display: inline-block;
  width: 300px;
  height: 400px;
}

#main2 
  margin-left 20px
  display inline-block
  width 800px
  height 400px

.div01
.p01
   color: red
</style>